<template>
  <div class="home">
    <el-container>
      <el-header height="12vh">欢迎来到后台管理系统</el-header>
      <el-container>
        <el-aside width="170px">
          <el-menu
            router
            default-active="/home/role"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu
              v-for="menu in $store.state.menus"
              :key="menu.id"
              :index="menu.id"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item
                v-for="subMenu in menu.children"
                :index="subMenu.path"
                :key="subMenu.id"
                @click="addTab(subMenu)"
              >
                >{{ subMenu.name }}</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-click="changeTab"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :url="item.url"
              :label="item.title"
              :name="item.name"
            >
              <router-view />
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      leftMenu: [],
      editableTabsValue: '1',
      editableTabs: [
        {
          title: '首页',
          name: '1',
          content: '首页信息',
        },
      ],
      tabIndex: 2,
    }
  },
  created() {
    if (sessionStorage.getItem('editableTabs')) {
      this.editableTabs = JSON.parse(sessionStorage.getItem('editableTabs'))
      this.editableTabsValue = sessionStorage.getItem('editableTabsValue')
    }
  },
  methods: {
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    changeTab(tab) {
      console.log(tab)
      //切换标签页时 需要把路由组件切换
      this.$router.push(tab.$attrs.url)
      sessionStorage.setItem('editableTabsValue', this.editableTabsValue)
    },
    //点击新增标签页
    addTab(obj) {
      //判断editableTabs中是否已经存在
      let b = this.editableTabs.some((item) => {
        return item.name == obj.id
      })
      this.editableTabsValue = obj.id
      if (b) return
      //console.log(obj);
      this.editableTabs.push({
        title: obj.name,
        name: obj.id,
        url: obj.path,
      })
      sessionStorage.setItem('editableTabs', JSON.stringify(this.editableTabs))
      sessionStorage.setItem('editableTabsValue', this.editableTabsValue)
    },
    removeTab(targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)

      sessionStorage.setItem('editableTabs', JSON.stringify(this.editableTabs))
      sessionStorage.setItem('editableTabsValue', this.editableTabsValue)
    },
  },
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 88vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 88vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.home {
  .el-header {
    font-size: 40px;
    font-weight: bolder;
  }
}
</style>
